<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="col-xs-12" id="joinDiv">
	<div>
		<ol class="breadcrumb">
			<li><a href="/Reservation/main/index.res">홈</a></li>
			<li><a href="/Reservation/join/join.res">이용약관</a></li>
			<li class="active">회원정보입력</li>
		</ol>
	</div>
	<div class="page-header">
		<h3>회원정보 입력</h3>
	</div>
	<form class="form-inline" id="joinForm">
		<div>
			<div>
				<h4>아이디정보</h4>
				<table>
					<tr>
						<th><label for="uid">아이디</label></th>
						<td><input type="text" class="form-control input-sm"
							name="uid" id="id"> <input type="button"
							class="btn btn-primary" name="uidchk" id="uidchk" value="중복확인">
							<span id="chkedUid"></span></td>
					</tr>
					<tr>
						<th><label for="passwd">비밀번호</label></th>
						<td><input type="password" class="form-control input-sm"
							name="passwd" id="pass"></td>
					</tr>
					<tr>
						<th><label for="repasswd">비밀번호 확인</label></th>
						<td><input type="password" class="form-control input-sm"
							name="repasswd" id="repass"> <span
							id="passwdchk"></span></td>
					</tr>
					<tr>
						<th><label for="question">비밀번호 분실시 질문</label></th>
						<td><select name="question" class="form-control input-sm"
							name="question" id="question">
								<option>질문을 선택하세요</option>
								<option>인상 깊게 읽은 책 이름은?</option>
								<option>자신의 보물 제1호는?</option>
								<option>기억에 남는 추억의 장소는?</option>
								<option>자신의 인생 좌우명은?</option>
								<option>가장 친한 친구 이름은?</option>
								<option>가장 좋아하는 색깔은?</option>
						</select></td>
					</tr>
					<tr>
						<th><label for="answer">답 입력</label></th>
						<td><input type="text" class="form-control input-sm"
							name="answer" id="answer"></td>
					</tr>
				</table>
			</div>
			<br />
			<div>
				<h4>개인정보</h4>
				<table>
					<tr>
						<th><label for="name">이름</label></th>
						<td><input type="text" class="form-control input-sm"
							name="name" id="name"></td>
					</tr>
					<tr>
						<th><label for="birth">생년월일</label></th>
						<td><select class="form-control input-sm" name="year"
							id="year">
								<c:forEach var="birthY" begin="${ year - 100 }"
									end="${ year - 1 }">
									<c:if test="${ birthY eq 1980 }">
										<option selected>${ birthY }</option>
									</c:if>
									<c:if test="${ birthY ne 1980 }">
										<option>${ birthY }</option>
									</c:if>
								</c:forEach>
						</select> 년&nbsp;&nbsp; <select class="form-control input-sm" name="month"
							id="month">
								<c:forEach var="birthM" begin="01" end="12">
									<option>${ birthM }</option>
								</c:forEach>
						</select> 월&nbsp;&nbsp; <select class="form-control input-sm" name="day"
							id="day">
								<c:forEach var="birthD" begin="01" end="31">
									<option>${ birthD }</option>
								</c:forEach>
						</select> 일 <br />
							<p>
								아이디/비밀번호 분실 등 본인 여부 확인이 필요할 경우를 위해 가급적 신분증에 <br /> 기재된 이름,
								생년월일을 입력해 주세요.<br /> 허위 정보를 입력하면 본인 확인할 수 없어 도움을 드릴 수가 없습니다.
							</p></td>
					</tr>
					<tr>
						<th><label for="phone">연락처</label></th>
						<td><select class="form-control input-sm" name="phone1"
							id="phone1">
								<option>010</option>
								<option>011</option>
								<option>016</option>
								<option>017</option>
								<option>018</option>
								<option>019</option>
						</select> - <input type="text" class="form-control input-sm phone"
							name="phone2" id="phone2" maxlength="4"> - <input
							type="text" class="form-control input-sm phone" name="phone3"
							id="phone3" maxlength="4"></td>
					</tr>
					<tr>
						<th><label for="zipcode1">주소</label></th>
						<td><input type="text" class="form-control input-sm zipcode"
							name="zipcode1" id="zipcode1" readonly="readonly"> - <input
							type="text" class="form-control input-sm zipcode" name="zipcode2"
							id="zipcode2" readonly="readonly"> <button type="button"
							class="btn btn-primary" id="findZip">검색</button><br />

							<input type="text" class="form-control input-sm" name="addr1"
							id="addr1" readonly="readonly"><br /> <input type="text"
							class="form-control input-sm" name="addr2" id="addr2"
							placeholder="나머지 주소 입력"></td>
					</tr>
					<tr>
						<th><label for="email">이메일 주소</label></th>
						<td>
							<div class="input-group">
								<input id="email1" type="text" class="form-control"
									name="email1" placeholder="이메일아이디"> <span
									class="input-group-addon">@</span> <input id="email2"
									type="text" class="form-control" name="email2"
									placeholder="도메인">
							</div> <select id="emailSelector" class="form-control">
								<option selected>직접입력</option>
								<option value="naver.com">네이버</option>
								<option value="hanmail.net">한메일</option>
								<option value="gmail.com">지메일</option>
								<option value="nate.com">네이트</option>
								<option value="hotmail.com">핫메일</option>
								<option value="dreamwiz.com">드림위즈</option>
								<option value="empal.com">엠팔</option>
						</select> <br />
							<p>
								패스워드 분실시 확인하는 메일 주소입니다.<br /> 또한 서울시정 소식 및 뉴스레터등 유익한 정보를 수신하기
								위해<br /> 필요하므로 주로 사용하시는 이메일 주소를 입력해 주시기 바랍니다.
							</p>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<br />
		<div id="btndiv">
			<input type="button" class="btn btn-primary" name="joinbtn"
				id="joinBtn" value="회원가입"> <input type="button"
				class="btn btn-default" name="canclebtn" id="cancelBtn" value="취소">
		</div>
		<input type="hidden" name="isJoin" value="join" />
	</form>
</div>

<!-- findAddr modal -->
<div class="modal fade" id="addrFind" tabindex="-1" role="dialog"
	data-backdrop="static">
	<div class="modal-dialog" style="width: 500px;">
		<div class="modal-content" style="padding: 5px;'">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h4 class="modal-title" style="margin: 0; font-weight: bold;">주소찾기</h4>
			</div>
			<div class="modal-body" style="height: 120px;">
				<div>
					<form class="form-inline" id="addrFindForm">
						<input class="form-control input-sm" type="text" id="dong"
							placeholder="동(읍/면)" />
						<button class="form-control input-sm btn-primary" type="button"
							id="findDong">검색</button>
					</form>
					<select class="form-control" id="addrSelect"
						style="margin-top: 15px;">
					</select>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="regAddr">등록</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script src="../js/join.js"></script>